import React, { Component } from 'react'
import './TodoHeader.css';

export default class TodoHeader extends Component {

  state = {
    msg: '',
  }

  render() {
    return (
        <div className="todo-header">
            <input
                type="text"
                placeholder="请输入你的任务名称，按回车键确认"
                value={this.state.msg}
                onChange={this.save}
                onKeyDown={this.addTodo}
            />
        </div>
    )
  }

  save = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

  addTodo = (e) => {
    //判断按键是不是 回车
    if(e.keyCode === 13){
      //新增任务
      this.props.addTodo(this.state.msg);
      //清空input内容
      this.setState({
        msg: ''
      })
    }
  }


}
